{% extends 'layout/manage.html' %}
{% load static %}
{% load issues %}
{% block css %}
<link rel="stylesheet" href="{% static 'plugin/editor-md/css/editormd.min.css' %}">
<link rel="stylesheet" href="{% static 'plugin/bootstrap-datepicker/css/bootstrap-datepicker.min.css' %}">
<link rel="stylesheet" href="{% static 'plugin/bootstrap-select/css/bootstrap-select.min.css' %}">
<style>

        .comment-area .item {
            margin-top: 20px;
        }

        .comment-area .left-avatar {
            float: left;
            margin-right: 10px;
            display: inline-block;
            width: 30px;
            height: 30px;
            background-color: #304659;
            color: white;
            text-align: center;
            line-height: 30px;
            border-radius: 50%;
        }

        .comment-area .right-info {
            padding-left: 35px;
        }

        .comment-area .right-info .desc .msg {
            display: inline-block;
            padding-right: 20px;
            color: #8c8c8c;
        }

        .comment-area .child {
            padding-left: 55px;
        }

        .comment-area .error-msg {
            color: red;
        }

        .comment-area .reply-user {
            display: inline-block;
            background-color: #ddd;
            color: black;
            padding: 6px 8px;
            margin-left: 20px;
            border-radius: 8px;
            cursor: pointer;
        }

        .editormd-fullscreen {
            z-index: 1001;
        }

    </style>
{% endblock %}
{% block content %}
<div class="container-fluid clearfix" style="padding: 20px 0;">
    <div class="col-sm-7">
        <div class="panel panel-default">
            <div class="panel-heading edit-heading">
                <div>
                    <i class="fa fa-edit" aria-hidden="true"></i> 更新问题
                </div>

            </div>
            <div class="panel-body">
                <form id="editForm" class="form-horizontal" method="post">
                    {% csrf_token %}
                    <div class="form-group">
                        <label for="{{ form.issues_type.id_for_label }}"
                               class="col-md-2 control-label">{{ form.issues_type.label }}</label>
                        <div class="col-md-10">
                            <div>
                                <div>
                                    {{ form.issues_type }}
                                </div>
                                <div class="error-msg"></div>
                            </div>
                            <div class="error-msg"></div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="{{ form.subject.id_for_label }}"
                               class="col-md-2 control-label">{{ form.subject.label }}</label>
                        <div class="col-md-10">
                            <div>
                                <div>
                                    {{ form.subject }}
                                </div>
                                <div class="error-msg"></div>
                            </div>
                            <div class="error-msg"></div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="{{ form.module.id_for_label }}"
                               class="col-md-2 control-label">{{ form.module.label }}</label>
                        <div class="col-md-10">
                            <div>
                                <div>
                                    {{ form.module }}
                                </div>
                                <div class="error-msg"></div>
                            </div>
                            <div class="error-msg"></div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="{{ form.desc.id_for_label }}"
                               class="col-md-2 control-label">{{ form.desc.label }}</label>
                        <div class="col-md-10">
                            <div>
                                <div id="editor">
                                    {{ form.desc }}
                                </div>

                                <div class="error-msg"></div>
                            </div>
                            <div class="error-msg"></div>
                        </div>
                    </div>

                    <div class="form-group clearfix">

                        <div class="col-md-6 pd-0">
                            <label for="{{ form.status.id_for_label }}"
                                   class="col-md-4 control-label">{{ form.status.label }}</label>
                            <div class="col-md-8 clearfix">
                                <div>
                                    {{ form.status }}
                                </div>
                                <div class="error-msg"></div>

                            </div>
                        </div>
                        <div class="col-md-6 pd-0">
                            <label for=" {{ form.priority.id_for_label }}"
                                   class="col-md-4 control-label">{{ form.priority.label }}</label>
                            <div class="col-md-8">
                                <div>
                                    {{ form.priority }}
                                </div>
                                <div class="error-msg"></div>

                            </div>
                        </div>
                    </div>

                    <div class="form-group clearfix">
                        <div class="col-md-6 pd-0">
                            <label for="{{ form.assign.id_for_label }}" class="col-md-4 control-label">
                                {{ form.assign.label }}</label>
                            <div class="col-md-8">
                                {{ form.assign }}
                                <div class="error-msg"></div>
                            </div>
                        </div>

                        <div class="col-md-6 pd-0">
                            <label for="{{ form.attention.id_for_label }}" class="col-md-4 control-label">
                                {{ form.attention.label }}</label>
                            <div class="col-md-8">

                                {{ form.attention }}

                                <div class="error-msg"></div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group clearfix">
                        <div class="col-md-6 pd-0">
                            <label for="{{ form.start_time.id_for_label }}" class="col-md-4 control-label">
                                {{ form.start_time.label }}</label>
                            <div class="col-md-8">

                                <div class="input-group">
                                    <span class="input-group-addon" id="sizing-addon2">
                                        <i class="fa fa-calendar" aria-hidden="true"></i>
                                    </span>
                                    {{ form.start_time }}
                                </div>
                                <span class="error-msg"></span>

                            </div>
                        </div>

                        <div class="col-md-6 pd-0">
                            <label for="{{ form.end_time.id_for_label }}" class="col-md-4 control-label">
                                {{ form.end_time.label }}</label>
                            <div class="col-md-8">

                                <div class="input-group">
                                    <span class="input-group-addon" id="sizing-addon2">
                                        <i class="fa fa-calendar" aria-hidden="true"></i>
                                    </span>
                                    {{ form.end_time }}
                                </div>
                                <span class="error-msg"></span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group clearfix">
                        <div class="col-md-6 pd-0">
                            <label for="{{ form.mode.id_for_label }}" class="col-md-4 control-label">
                                {{ form.mode.label }}</label>
                            <div class="col-md-8">
                                <div>
                                    {{ form.mode }}
                                </div>
                                <div class="error-msg"></div>
                            </div>
                        </div>

                        <div class="col-md-6 pd-0">
                            <label for="{{ form.parent.id_for_label }}" class="col-md-4 control-label">
                                {{ form.parent.label }}</label>
                            <div class="col-md-8">

                                {{ form.parent }}

                                <div class="error-msg"></div>
                            </div>
                        </div>
                    </div>


                </form>
            </div>
        </div>
    </div>
    <div class="col-sm-5">
        <div class="panel panel-default">
            <div class="panel-heading">
                <i class="fa fa-search" aria-hidden="true"></i> 操作记录
            </div>
            <div class="panel-body comment-area">

                <div class="comment-list">


                </div>

                <hr/>
                <div class="comment-text" id="commentText">

                    <div class="form-group">
                            <textarea id="content" rows="6" class="form-control"
                                      placeholder="请输入要回复的内容"></textarea>
                        <span class="error-msg"></span>
                    </div>

                    <input class="btn btn-primary" type="button" id="btnSubmit" value="提 交">
                    <div class="reply-user hide" id="replyUser">
                        回复 <span></span>
                        <i class="fa fa-times-circle" aria-hidden="true" style="color: #9d9d9d;"></i>
                    </div>
                </div>


            </div>
        </div>
        <nav aria-label="...">
            <ul class="pagination" style="margin-top:0;">
                {{ page|safe }}
            </ul>
        </nav>
    </div>
    <div class="hide" id="recordTemplate">
        <div class="item clearfix">
            <div class="left-avatar"></div>
            <div class="right-info">
                <pre></pre>
                <div class="desc">
                    <div class="msg">
                        <i class="fa fa-bullhorn" aria-hidden="true"></i>
                        <span class="type"></span>
                    </div>
                    <div class="msg">
                        <i class="fa fa-user-o" aria-hidden="true"></i>
                        <span class="user"></span>
                    </div>
                    <div class="msg">
                        <i class="fa fa-clock-o" aria-hidden="true"></i>
                        <span class="date"></span>
                    </div>

                    <a href="#commentText" class="reply">
                        <i class="fa fa-commenting-o" aria-hidden="true"></i> 回复
                    </a>
                    &nbsp;&nbsp;&nbsp;
                    <a class="btn btn-danger btn-xs"
                                   data-toggle="modal"
                                   data-fid="{{ order.id }}"
                                   data-target="#alertModal"
                                >
                                    删除
                                </a>

                </div>
            </div>
            <div class="child">

            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block js %}
<script src="{% static 'plugin/editor-md/editormd.min.js' %}"></script>
<script src="{% static 'plugin/bootstrap-datepicker/js/bootstrap-datepicker.min.js' %}"></script>
<script src="{% static 'plugin/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js' %}"></script>
<script src="{% static 'plugin/bootstrap-select/js/bootstrap-select.min.js' %}"></script>
<script src="{% static 'plugin/bootstrap-select/js/i18n/defaults-zh_CN.min.js' %}"></script>
<script src="{% static 'tracer/js/issues.js' %}"></script>
<script>
    var WIKI_UPLOAD_URL = "{% url 'websass:wiki_upload' project_id=request.tracer.project.id%}";
    var ISSUES_RECORD_API = "{% url 'websass:issues_record' project_id=request.tracer.project.id issues_id=issues_object.id %}";
    var ISSUES_CHANGE_API = "{% url 'websass:issues_change' project_id=request.tracer.project.id issues_id=issues_object.id %}";
    var EDITOR;
    $(function(){
            initEditorMd();
            initDatepicker();
            initIssuesRecord();
            bindReply();
            bindCancelReplyUser();
            bindSubmit();
            bindIssuesChange();
        });


    /*
        时间选择器
    */
    function initDatepicker(){
        $('#id_start_time,#id_end_time').datepicker({
            format:'yyyy-mm-dd',
            startDate:'0',
            language:'zh-CN',
            autoclose: true
        });
    }
    /*
        初始化markdown编辑器(textare转换为编辑器)
    */
    function initEditorMd(){
        EDITOR = editormd('editor',{
                    placeholder:"请输入内容",
                    height: 250,
                    path:"{% static 'plugin/editor-md/lib/' %}",
                    imageUpload:true,
                    imageFormats:['jpg','jpeg','png','gif'],
                    toolbarAutoFixed: false,
                    imageUploadURL:WIKI_UPLOAD_URL,
                    /*
                        默认预览的的显示
                    */
                    /*
                        给morkdown定制
                    */
                    toolbarIcons: function () {
                            return ["bold", "hr", "del", "italic", "quote", "|", "image", "preview", "watch", "fullscreen", "||", "save"]
                        },
                    toolbarCustomIcons: {
                            save: "<input type='button' value='保 存' class='btn btn-success btn-sm' onclick='saveDesc();' />"
                        },
                    onload:function(){
                        this.previewing();
                    }
                })

    }

    function initIssuesRecord(){
        $.ajax({
            url:ISSUES_RECORD_API,
            type: "GET",
            dataType: "JSON",
            success: function (res){
                if (res.status) {
                        $.each(res.data, function (index, item) {
                            createRecordNode(item);
                        })
                    } else {

                    }
            }
        })
    }
    /*
        创建操作记录节点
         */
    function createRecordNode(nodeDict) {
        var $item = $("#recordTemplate").find('.item').clone();
        $item.find('.left-avatar').html(nodeDict.creator[0]. toUpperCase());
        $item.find('pre').html(nodeDict.content);
        $item.find('.user').html(nodeDict.creator);
        $item.find('.type').html(nodeDict.reply_type_text);
        $item.find('.date').html(nodeDict.datetime);
        $item.attr({id: nodeDict.id, username: nodeDict.creator});

        if (nodeDict.parent_id) {
            // 挂在谁下
            $('#' + nodeDict.parent_id).children('.child').append($item);
        } else {
            // 根下
            $('.comment-list').append($item);
            // $('.comment-list').insertBefore($item,$('.comment-list').children[0] )
        }
    }
    /*
        回复问题
         */
    function bindReply() {
        $('.comment-list').on('click', '.reply', function () {
            var $item = $(this).parent().parent().parent();
            var id = $item.attr('id');
            var username = $item.attr('username');
            $('#replyUser').removeClass('hide').attr('parent-id', id).children('span').text(username);
        })
    }

    /*
    取消回复
     */
    function bindCancelReplyUser() {

        $('#replyUser').click(function () {
            $(this).addClass('hide').removeAttr('parent-id').children('span').text("");
        })
    }
    function bindSubmit(){
        $('#btnSubmit').click(function(){
            $("#commentText .error-msg").text("");
            $.ajax({
                url: ISSUES_RECORD_API,
                type: 'POST',
                data: {content:$('#content').val(), reply: $('#replyUser').attr('parent-id')},
                dataType: 'JSON',
                success: function(res){
                    if (res.status){
                        createRecordNode(res.data)
                        // 输入的内容清空
                        $('#content').val('');
                        $('#replyUser').addClass('hide').removeAttr('parent-id').children('span').text("");
                    }else{
                        $.each(res.error, function (k, v) {
                                $('#content').next('.error-msg').text(v[0]);
                            })
                    }
                }

            })

        })
    }

    function bindIssuesChange(){
<!--        给每个字段都绑定change事件-->
        $('#editForm').find('.form-control').change(function(){
<!--         然后找到这个name属性和值-->
        var postDict = {name: $(this).attr('name'), value: $(this).val()};
        postAjaxRequest(postDict);
        });
    }
    function saveDesc(){
        var postDict = {name: 'desc', value: EDITOR.getValue()};
        postAjaxRequest(postDict);
    }

    function postAjaxRequest(postDict){
        $.ajax({
            url:ISSUES_CHANGE_API,
            type:'POST',
            header:{
                "Content-Type": "application/json;charset=utf-8"
            },
            data:JSON.stringify(postDict),
            dataType: "JSON",
            success: function(res){
                console.log(res);
                if(res.status){
                    createRecordNode(res.data);
                }else{
                    $('#id_'+postDict.name).parent().next('.error-msg').text(res.error);
                }
            }
        })
    }
</script>
{% endblock %}